<template>
    <tm-app class="app" color="#EFE8DD">
        <Navbar hideHome :fontSize="40" fontColor="#444444" title="激活会员" color="#EFE8DD" :shadow="0">
        </Navbar>
        <view class="content">
            <image class="result" mode="widthFix" :src="status ? success_image : fail_image"></image>
            <tm-text class="mt-16" :font-size="40" color="#A37C3D" :label="`${status ? '恭喜你！激活成功' : '激活失败，会员激活码不正确'}`"></tm-text>
            <ImageButtom @click="navigateBack()" class="back-btn" :image="BtnBg">
                <tm-text :font-size="32" color="#fff" label="返回"></tm-text>
            </ImageButtom>
        </view>
        <image class="bg" mode="widthFix" :src="year_bg_image"></image>
    </tm-app>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import Navbar from '@/components/navbar/index.vue';
import year_bg_image from '/static/assets/images/index/year-bg.png';
import fail_image from '/static/assets/images/my/vipActived/fail.png';
import success_image from '/static/assets/images/my/vipActived/success.png';
import BtnBg from '/static/assets/images/common/btn-bg.png';
import ImageButtom from '@/components/ImageButton/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import { navigateBack } from '@/utils/index.ts'; 

const status = ref(true);

onLoad((option) => {
    status.value = option.res === 'success';
})

</script>

<style lang="less" scoped>
.app {
    position: relative;
    z-index: 0;
}

.content {
    padding-top: 66rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.back-btn {
    background-color: #A37C3D;
    color: #fff;
    width: 320rpx;
    height: 88rpx;
    margin: 0 auto;
    margin-top: 36rpx;
}

.result {
    width: 312rpx;
}

.bg {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: -1;
}
</style>